<div class="d-flex flex-column justify-content-between">
  <ng-container *appDisplayControl="'write_compliance_profile'">
    <div
      class="d-flex flex-row justify-content-between align-items-center pt-2">
      <div>
        <mat-checkbox
          (change)="updateSystem()"
          [(ngModel)]="hideSystem"
          class="mx-3"
          >{{ 'cis.profile.HIDE_SYSTEM' | translate }}</mat-checkbox
        >
      </div>
      <div class="d-flex flex-row align-items-center">
        <span *ngIf="totalChanges > 0" class="d-block"
          >{{ totalChanges }}&nbsp;{{ 'cis.profile.PENDING' | translate
          }}{{ 'cis.profile.CHANGES' | translate }}</span
        >
        <button
          (click)="saveChanges()"
          *ngIf="totalChanges > 0"
          class="mx-2"
          mat-stroked-button>
          {{ 'general.SUBMIT' | translate }}
        </button>
        <button (click)="reset()" mat-stroked-button>
          {{ 'cis.profile.RESET' | translate }}
        </button>
      </div>
    </div>
    <div class="d-flex flex-row align-items-center cis-filter mx-3">
      <span class="d-block mr-4">{{
        'cis.profile.COMPLIANCE_TEMPLATE' | translate
      }}</span>
      <div class="d-flex flex-row align-items-center mr-2">
        <mat-checkbox
          (change)="filterChange('ALL')"
          [(ngModel)]="all"
          [disabled]="all"
          aria-label="All"
          class="mr-2"></mat-checkbox>
        <span class="d-block" style="font-size: 28px; font-weight: bold"
          >ALL</span
        >
      </div>
      <div class="d-flex flex-row align-items-center">
        <mat-checkbox
          (change)="filterChange('PCI')"
          [(ngModel)]="pci"
          aria-label="PCI"
          class="mr-2"></mat-checkbox>
        <img alt="pci" src="assets/img/icons/pci.png" />
      </div>
      <div class="d-flex flex-row align-items-center mr-2">
        <mat-checkbox
          (change)="filterChange('GDPR')"
          [(ngModel)]="gdpr"
          aria-label="GDPR"
          class="mr-2"></mat-checkbox>
        <img alt="gdpr" src="assets/img/icons/gdpr.svg" />
      </div>
      <div class="d-flex flex-row align-items-center mr-2">
        <mat-checkbox
          (change)="filterChange('HIPAA')"
          [(ngModel)]="hipaa"
          aria-label="HIPAA"
          class="mr-2"></mat-checkbox>
        <img alt="hipaa" src="assets/img/icons/hipaa.png" />
      </div>
      <div class="d-flex flex-row align-items-center mr-2">
        <mat-checkbox
          (change)="filterChange('NIST')"
          [(ngModel)]="nist"
          aria-label="NIST"
          class="mr-2"></mat-checkbox>
        <img alt="nist" src="assets/img/icons/nist.png" />
      </div>
    </div>
  </ng-container>
  <div class="d-flex flex-row justify-content-between align-items-center">
    <span class="d-block font-weight-bold text-info"
      ><span *ngIf="filtered$ | async"
        >{{ 'enum.FOUND' | translate }} {{ filteredCount }}&nbsp;/</span
      >
      <span *ngIf="!(filtered$ | async)">
        {{ 'enum.OUT_OF' | translate }}&nbsp;
      </span>
      {{ rowData.length }}
    </span>
    <app-quick-filter
      (filterCountChange)="filterCountChanged($event)"
      [gridOptions]="gridOptions"
      [showCount]="false">
    </app-quick-filter>
  </div>
</div>
<ag-grid-angular
  (window:resize)="onResize()"
  [gridOptions]="gridOptions"
  class="ag-theme-alpine"
  style="width: 100%"
  [style.height]="
    isWriteComplianceProfileAuthorized
      ? 'calc(100% - 160px)'
      : 'calc(100% - 80px)'
  ">
</ag-grid-angular>
